/* ==========================================================
   Brandywine Tree & Shrub — Design Tokens
   ========================================================== */

:root {
  /* ── Color Palette ── */
  --forest:     hsl(102, 55%, 20%);
  --canopy:     hsl(100, 50%, 32%);
  --leaf:       hsl(90, 42%, 50%);
  --leaf-light: hsl(90, 50%, 72%);
  --bark:       hsl(16, 25%, 18%);
  --earth:      hsl(16, 18%, 30%);
  --cream:      hsl(34, 50%, 97%);
  --cream-warm: hsl(34, 40%, 93%);
  --white:      #ffffff;
  --charcoal:   hsl(240, 2%, 16%);
  --gray-600:   hsl(200, 3%, 46%);
  --gray-400:   hsl(200, 3%, 66%);
  --gray-200:   hsl(200, 3%, 88%);
  --ember:      hsl(0, 78%, 58%);
  --ember-dark: hsl(0, 72%, 48%);
  --gold:       hsl(43, 90%, 55%);

  /* ── Semantic Colors ── */
  --clr-bg:           var(--cream);
  --clr-bg-alt:       var(--cream-warm);
  --clr-surface:      var(--white);
  --clr-text:         var(--charcoal);
  --clr-text-muted:   var(--gray-600);
  --clr-primary:      var(--canopy);
  --clr-primary-dark: var(--forest);
  --clr-accent:       var(--leaf);
  --clr-cta:          var(--ember);
  --clr-cta-hover:    var(--ember-dark);

  /* ── Typography ── */
  --ff-heading: 'Comfortaa', 'Trebuchet MS', sans-serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-hero:  clamp(2.8rem, 5vw + 1rem, 5rem);
  --fs-h1:    clamp(2rem, 3vw + 0.5rem, 3.2rem);
  --fs-h2:    clamp(1.6rem, 2.5vw + 0.4rem, 2.4rem);
  --fs-h3:    clamp(1.2rem, 1.5vw + 0.3rem, 1.6rem);
  --fs-body:  clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  --fs-small: clamp(0.85rem, 0.3vw + 0.75rem, 0.95rem);
  --fs-xs:    0.8rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:  1.2;
  --lh-body:   1.65;
  --lh-loose:  1.8;

  /* ── Spacing Scale ── */
  --sp-xs:   0.25rem;
  --sp-sm:   0.5rem;
  --sp-md:   1rem;
  --sp-lg:   1.5rem;
  --sp-xl:   2rem;
  --sp-2xl:  3rem;
  --sp-3xl:  4rem;
  --sp-4xl:  6rem;
  --sp-5xl:  8rem;

  --section-py: clamp(4rem, 8vw, 8rem);
  --section-px: clamp(1.25rem, 4vw, 3rem);
  --container-max: 1200px;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 30px rgba(143, 184, 88, 0.2);

  /* ── Glass Effect ── */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-bg-dark: rgba(45, 80, 22, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur:   blur(16px);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     150ms;
  --dur-normal:   300ms;
  --dur-slow:     500ms;
  --dur-reveal:   800ms;
}